
body{
    background: #F4F5FA;
}
.nav{
    // height:1.17rem;
    background:rgba(255,255,255,1);
    position: fixed;
    z-index: 99;
    width: 100%;
    .retrie{
        height:1.17rem;
        border-bottom: 0.01rem solid #E5E5E5;
        li{
            font-size:0.4rem;
            color:#666666;
            width: 50%;
            float: left;
            text-align: center;
            line-height: 1.17rem;
            position: relative;
            a{
                font-size:0.4rem;
                color:#666666; 
                display: inline-block;               
            }
        }
        .select{
            color: #dc3838;
            span{
                border-bottom: 0.1rem solid #dc3838;
                border-radius: 0.03rem;
                position: relative;
                bottom: 0;
                display: inline-block;
            }  
            i{
                background: url("../images/icon_up_nor@2x@2x.png");
                background-size: cover;
                width:0.27rem;
                height:0.15rem;
                display: inline-block;
                margin-left: 0.13rem;
                vertical-align: middle;
            }          
        }
        .select-i{
            i{
                background: url("../images/icon_down_nor@2x@2x.png");
                background-size: cover;
                width:0.27rem;
                height:0.15rem;
                display: inline-block;
                margin-left: 0.13rem;
                vertical-align: middle;                
            }
        }
    }  
    .area{
        display: none;
        height:1.6rem;
        background:rgba(255,255,255,1);
        opacity:0.01rem;
        .slide{
            padding: 0.4rem .51rem;
            display: inline-block;
            li{
                width:1.87rem;
                height:0.8rem;
                background:#E7E7E7;
                border-radius: 0.11rem ;
                line-height: 0.8rem;
                text-align: center;
                float: left;
                margin-right: 0.48rem;
                &:last-child{
                    margin: 0;
                }
                a{
                    font-size:0.35rem;
                    color:#666666;
                    display: block;
                }
            }
            .slide-select{
                background: #DC3838;
                a{
                    color:#fff;
                }
            }
        }
    }
}
.plan-pro{
    padding-top: 1.17rem;
    margin-bottom: 1.33333333rem;
    a{
        display: inline-block;
        width: 100%;
        margin-bottom: 0.25rem;
        .plan-pro-item{
            height:4.05rem;
            background:rgba(255,255,255,1);
            padding: 0.4rem;
            .plan-pro-top{
                height: 1.31rem;
                width: 9.2rem;
                .pro-top-left{                  
                    width:1.31rem; 
                    height:1.31rem; 
                    margin-right: .2rem;
                    float: left;   
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .pro-top-rigth{
                    height: 100%;
                    padding: .12rem 0;
                    font-size: 0;
                    -webkit-text-size-adjust:none;
                    letter-spacing: -0.02rem;                      
                    .top-right-title{
                        font-size:0.4rem;
                        color:rgba(51,51,51,1);
                        margin-bottom: 0.15rem;
                    }
                    .top-right-info{
                        span{
                            border-radius: 0.05rem ;
                            font-size:0.27rem;
                            padding: 0.12rem;
                            color:rgba(255,255,255,1);
                            display: inline-block;
                            margin-right: 0.11rem;
                            background: -webkit-linear-gradient(left, #78BFF4 , #529EED);
                            background: -o-linear-gradient(right, #78BFF4 , #529EED);
                            background: -moz-linear-gradient(right,#78BFF4 , #529EED);
                            background: linear-gradient(to right,#78BFF4, #529EED);
                            &:last-child{
                                margin: 0;
                            }
                        }
                    }
                }
            }
            .plan-pro-bottom{
                clear: both;
                margin-top: 0.55rem;
                display: inline-block;
                width: 100%;
                .pro-bottom-left{
                    float: left;
                    margin-right: 1.61rem;
                    &:nth-child(2){
                        margin-right: 0;
                        margin-top: 0.25rem;
                        dd:first-child{
                            font-size:0.42rem;
                            color:rgba(17,17,17,1);
                        }
                    }
                    dd{
                        font-size:0.34rem;
                        color:rgba(153,153,153,1);
                        margin-bottom: 0.2rem; 
                        &:first-child{
                            color: #dc3838;
                        }
                        i{
                            font-style: normal;
                            font-size:0.64rem;
                        }                       
                    }
                }
                .pro-bottom-right{
                    background: url("../images/fanli-bg.png");
                    background-size: cover;
                    width:2.64rem;
                    height:0.88rem;
                    text-align: center;
                    font-size:0.35rem; 
                    line-height: 0.88rem;
                    color:rgba(255,255,255,1);
                    float: right;
                    margin-top: 0.25rem;
                }
            }
        }        
    }

}
.area-slide{
    position: fixed;
    background-color: #000;
    opacity: 0.4;
    z-index: 1;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}  
/* 底部 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 1.3333333333rem;
  background-color: #fff;
  z-index: 10; }
  .footer > .footer-item {
    flex: 1;
    height: 100%;
    text-align: center;
    font-size: 0; }
    .footer > .footer-item > a {
      display: block; }
      .footer > .footer-item > a > .icon-wrapper {
        width: 100%;
        height: 0.96rem;
        line-height: 0.96rem; }
        .footer > .footer-item > a > .icon-wrapper > .basefont {
          display: inline-block;
          vertical-align: middle;
          width: 0.5333333333rem;
          height: 0.64rem;
          background-image: url("../images/icon-b@2x.png");
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%; }
          @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
            .footer > .footer-item > a > .icon-wrapper > .basefont {
              background-image: url("../images/icon-b@3x.png"); } }
        .footer > .footer-item > a > .icon-wrapper > .licai {
          display: inline-block;
          vertical-align: middle;
          width: 0.5866666667rem;
          height: 0.5866666667rem;
          background-image: url("../images/icon-l@2x.png");
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%; }
          @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
            .footer > .footer-item > a > .icon-wrapper > .licai {
              background-image: url("../images/icon-l@3x.png"); } }
        .footer > .footer-item > a > .icon-wrapper > .ceping {
          display: inline-block;
          vertical-align: middle;
          width: 0.5333333333rem;
          height: 0.5333333333rem;
          background-image: url("../images/icon-c@2x.png");
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%; }
          @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
            .footer > .footer-item > a > .icon-wrapper > .ceping {
              background-image: url("../images/icon-c@3x.png"); } }
        .footer > .footer-item > a > .icon-wrapper > .center {
          display: inline-block;
          vertical-align: middle;
          width: 0.48rem;
          height: 0.5866666667rem;
          background-image: url("../images/icon-m@2x.png");
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%; }
          @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
            .footer > .footer-item > a > .icon-wrapper > .center {
              background-image: url("../images/icon-m@3x.png"); } }
      .footer > .footer-item > a > span {
        display: inline-block;
        width: 100%;
        font-size: 10px;
        color: #acacac; }
    .footer > .footer-item.active > a > .icon-wrapper > .basefont {
      background-image: url("../images/icon-b-active@2x.png");
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%; }
      @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        .footer > .footer-item.active > a > .icon-wrapper > .basefont {
          background-image: url("../images/icon-b-active@3x.png"); } }
    .footer > .footer-item.active > a > .icon-wrapper > .licai {
      background-image: url("../images/icon-l-active@2x.png");
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%; }
      @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        .footer > .footer-item.active > a > .icon-wrapper > .licai {
          background-image: url("../images/icon-l-active@3x.png"); } }
    .footer > .footer-item.active > a > .icon-wrapper > .ceping {
      background-image: url("../images/icon-c-active@2x.png");
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%; }
      @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        .footer > .footer-item.active > a > .icon-wrapper > .ceping {
          background-image: url("../images/icon-c-active@3x.png"); } }
    .footer > .footer-item.active > a > .icon-wrapper > .center {
      background-image: url("../images/icon-m-active@2x.png");
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%; }
      @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        .footer > .footer-item.active > a > .icon-wrapper > .center {
          background-image: url("../images/icon-m-active@3x.png"); } }
